@for $i from 0 through 1200 {
    .mg-#{$i} {
        margin: #{$i}px;
    }

    .mgt-#{$i} {
        margin-top: #{$i}px;
    }

    .mgr-#{$i} {
        margin-right: #{$i}px;
    }

    .mgb-#{$i} {
        margin-bottom: #{$i}px;
    }

    .mgl-#{$i} {
        margin-left: #{$i}px;
    }

    .pd-#{$i} {
        padding: #{$i}px;
    }

    .pdt-#{$i} {
        padding-top: #{$i}px;
    }

    .pdr-#{$i} {
        padding-right: #{$i}px;
    }

    .pdb-#{$i} {
        padding-bottom: #{$i}px;
    }

    .pdl-#{$i} {
        padding-left: #{$i}px;
    }

    .f#{$i} {
        font-size: #{$i}px;
    }

    .wf#{$i} {
        font-weight: #{$i};
    }

    .lh#{$i} {
        line-height: #{$i}px;
    }

    .w#{$i} {
        width:#{$i}px;
    }

    .h#{$i} {
        height: #{$i}px;
    }

    .w-calc#{$i} {
        width: calc(100% - #{$i}px);
    }

    .h-calc#{$i} {
        height: calc(100vh - #{$i}px);
    }

    .left#{$i} {
        left: #{$i}px;
    }

    .top#{$i} {
        top: #{$i}px;
    }

    .right#{$i} {
        right: #{$i}px;
    }

    .bottom#{$i} {
        bottom: #{$i}px;
    }

    .left-#{$i} {
        left: -#{$i}px;
    }

    .to-p#{$i} {
        top: -#{$i}px;
    }

    .right-#{$i} {
        right: -#{$i}px;
    }

    .bottom-#{$i} {
        bottom: -#{$i}px;
    }

    .bras#{$i} {
        border-radius: #{$i}px;
    }

    .lh#{$i} {
        line-height: #{$i}px;
    }

    .rotate#{$i} {
        transform:rotate(#{$i}deg);
    }
}